<template>
  <span class="icon-refresh" >
    <el-tooltip v-if="!isDropdown" class="item" effect="dark" transition="" :content="$t('public.refresh')" placement="bottom">
      <i class= "iconfont icon-shuaxin" :class="positionClass" @click="refresh"></i>
    </el-tooltip>
    <el-dropdown v-if="isDropdown" @command="handleCommand" trigger="click">
      <i class= "iconfont icon-shuaxin" :class="positionClass"></i>
      <el-dropdown-menu>
        <el-dropdown-item command="a">手动刷新</el-dropdown-item>
        <el-dropdown-item command="b">自动刷新</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </span>
</template>
<script>
  export default {
    name: 'Refresh',
    methods: {
      refresh () {
        this.$emit('refresh')
      },
      handleCommand (data) {
        if (data === 'a') {
          this.$emit('refresh')
        }
        if (data === 'b') {
          this.$emit('autoRefresh')
        }
      }
    },
    props: {
      positionClass: String,
      isDropdown: {
        type: Boolean,
        default: function () {
          return false
        }
      },
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .icon-refresh
    flex 1
    cursor pointer
    text-align center
    margin-right 8px
    :hover
      color $c-main !important
    .iconfont
      color $c-main
  .positionClass
    position absolute
    top 10px
    right 0
    .icon-shuaxin
      font-size 18px
</style>
